@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/extensions/flow/organisms/FlowPlayground.mdx

@@ -0,0 +1,185 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Extensions/Flow/FlowPlayground/Guide" />
+
+# Flow Playground
+
+O Flow Playground é uma ferramenta interativa completa e robusta para criar, editar e testar diagramas de fluxo diretamente no Storybook. Inspirado em https://play.reactflow.dev/, oferece uma experiência profissional com abas e configuração multi-step.
+
+## Visão Geral
+
+O playground oferece uma experiência completa de desenvolvimento para trabalhar com componentes Flow, permitindo:
+
+- **Criação Interativa**: Adicione e remova nodes e edges em tempo real
+- **Configuração Guiada**: Multi-step dentro de cada aba para configuração organizada
+- **Customização Completa**: Configure todos os aspectos do flow através de abas categorizadas
+- **Validação**: Valide a estrutura do flow e regras de conexão
+- **Code Generation**: Gere código React a partir do flow
+- **Temas**: Alterne entre temas light e dark
+- **Apply Changes**: Sistema de mudanças pendentes com aplicação explícita
+
+## Estrutura do Playground
+
+### Layout Split-View
+
+O playground utiliza um layout split-view:
+
+- **Lado Esquerdo**: Abas principais e Stepper multi-step
+- **Lado Direito**: Canvas do React Flow sempre visível
+
+### Abas Principais
+
+1. **Nodes & Edges** - Configuração completa de nodes e edges
+2. **Canvas** - Configurações do ReactFlow
+3. **Background** - Configuração de background
+4. **Layout** - Algoritmos de layout
+5. **Validation** - Regras e validação
+6. **Code** - Preview e exportação de código
+7. **Settings** - Configurações gerais
+
+### Multi-Step dentro de cada Aba
+
+Cada aba possui um Stepper com passos lógicos:
+
+#### Nodes & Edges
+- **Step 1: Dataset** - Selecionar template/dataset inicial
+- **Step 2: Node Types** - Configurar tipos de nodes disponíveis
+- **Step 3: Edge Types** - Configurar tipos de edges disponíveis
+- **Step 4: Editor** - Editar node ou edge selecionado
+
+#### Canvas
+- **Step 1: Basic** - Configurações básicas do ReactFlow
+- **Step 2: Interaction** - Configurações de interação
+- **Step 3: Viewport** - Configurações de viewport
+
+#### Background
+- **Step 1: Background** - Configuração completa de background
+
+#### Layout
+- **Step 1: Layout** - Configuração de algoritmos de layout
+
+#### Validation
+- **Step 1: Validation** - Validação do flow
+
+#### Code
+- **Step 1: Code Preview** - Preview e exportação de código
+
+#### Settings
+- **Step 1: Settings** - Configurações gerais
+
+## Funcionalidades Principais
+
+### Apply Changes
+
+O playground utiliza um sistema de mudanças pendentes:
+
+- Todas as alterações são marcadas como "pending"
+- Botão "Apply Changes" no header aplica as mudanças
+- Botão "Discard" descarta mudanças não aplicadas
+- Indicador visual mostra quando há mudanças pendentes
+
+### Dataset Selector
+
+No primeiro step de "Nodes & Edges":
+
+- Selecione um template pré-configurado
+- Templates incluem: Tree, Simple Workflow, Decision Tree, Process Flow, Hierarchy
+- Carregamento automático de nodes e edges do template
+
+### Node Inspector
+
+Quando um node ou edge está selecionado:
+
+- Editor aparece automaticamente no step "Editor"
+- Edite propriedades em tempo real
+- Mudanças refletidas imediatamente no canvas
+
+### Navegação
+
+- **Abas**: Clique nas abas à esquerda para mudar de categoria
+- **Steps**: Use os botões Next/Previous no Stepper para navegar entre steps
+- **Canvas**: Sempre visível à direita mostra resultado em tempo real
+
+## Componentes do Design System Utilizados
+
+O playground utiliza exclusivamente componentes do design system:
+
+- **Tabs** (Molecules) - Para abas principais
+- **Stepper** (Organisms) - Para multi-step
+- **Card** (Molecules) - Para containers
+- **Button** (Atoms) - Para ações
+- **Input, Select, Label** (Atoms) - Para formulários
+- **Checkbox** (Atoms) - Para opções
+
+## Fluxo de Uso
+
+1. **Selecione uma Aba**: Clique em uma aba à esquerda (ex: "Nodes & Edges")
+2. **Navegue pelos Steps**: Use o Stepper para navegar entre os steps da aba
+3. **Configure**: Ajuste configurações em cada step
+4. **Visualize**: Veja mudanças em tempo real no canvas à direita
+5. **Aplique Mudanças**: Clique em "Apply Changes" quando estiver satisfeito
+6. **Exporte**: Use a aba "Code" para gerar e exportar código
+
+## Exemplos de Uso
+
+### Criar um Flow do Zero
+
+1. Aba "Nodes & Edges" → Step "Dataset"
+2. Selecione um template ou comece vazio
+3. Adicione nodes clicando no canvas
+4. Conecte nodes arrastando de um handle para outro
+5. Configure propriedades no Step "Editor"
+
+### Aplicar Layout Automático
+
+1. Aba "Layout" → Step "Layout"
+2. Selecione algoritmo (Dagre, ELK, Force-Directed)
+3. Configure direção e espaçamento
+4. Clique em "Apply Layout"
+5. Aplique mudanças no header
+
+### Validar Flow
+
+1. Aba "Validation" → Step "Validation"
+2. Clique em "Validate"
+3. Veja erros e avisos
+4. Corrija problemas indicados
+5. Valide novamente
+
+## Dicas
+
+1. **Apply Changes**: Sempre aplique mudanças antes de mudar de aba para não perder configurações
+2. **Node Selection**: Clique em nodes/edges no canvas para editá-los
+3. **Templates**: Use templates como ponto de partida para flows complexos
+4. **Multi-Step**: Navegue pelos steps para configuração organizada
+5. **Code Preview**: Use a aba "Code" para ver código gerado e copiar
+
+## Troubleshooting
+
+### Mudanças não aparecem
+
+- Certifique-se de clicar em "Apply Changes"
+- Verifique se há mudanças pendentes (indicador no header)
+
+### Nodes não aparecem
+
+- Verifique se o template foi carregado corretamente
+- Certifique-se de que os nodes têm posições válidas
+
+### Layout não aplica
+
+- Verifique se selecionou um algoritmo de layout
+- Clique em "Apply Layout" no painel de layout
+- Depois clique em "Apply Changes" no header
+
+## Arquitetura
+
+O playground utiliza:
+
+- **PlaygroundContext**: Estado global compartilhado
+- **PlaygroundLayout**: Layout principal split-view
+- **PlaygroundTabs**: Gerenciamento de abas
+- **PlaygroundCanvas**: Canvas principal
+- **playgroundSteps**: Configuração de steps por aba
+
+Todos os componentes seguem os padrões do design system e são totalmente reutilizáveis.

package/src/ui/extensions/flow/organisms/FlowPlayground.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within, waitFor } from '@storybook/test';
+import { PlaygroundLayout } from '../components/PlaygroundLayout';
+import { treeTemplate } from '../utils/playgroundTemplates';
+import type { Node, Edge } from '@xyflow/react';
+import type { FlowNodeData, FlowEdgeData } from './FlowTypes';
+import { generateNodeId } from '../utils/playgroundHelpers';
+
+const meta: Meta = {
+  title: 'Extensions/Flow/FlowPlayground',
+  tags: ['autodocs', 'playground'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## FlowPlayground
+
+Advanced interactive playground for creating and editing flow diagrams. Configure all ReactFlow props, edit nodes and edges, preview generated code, and share your flows.
+
+### Events
+
+| Event | Description | Parameters | When Fired |
+|-------|-------------|------------|------------|
+| N/A | FlowPlayground é um playground interativo | - | Eventos são gerenciados internamente pelo componente |
+
+### States
+
+| State | Description | How to Activate | Visual |
+|-------|-------------|-----------------|--------|
+| \`playground\` | Playground interativo | Estado padrão | Interface completa de playground com todas as funcionalidades |
+        `,
+      },
+    },
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Prepare initial nodes and edges from tree template
+const initialNodes: Node<FlowNodeData>[] = treeTemplate.nodes.map((node) => ({
+  ...node,
+  id: generateNodeId(),
+}));
+
+const nodeIdMap = new Map(treeTemplate.nodes.map((n, i) => [n.id, initialNodes[i].id]));
+
+const initialEdges: Edge<FlowEdgeData>[] = treeTemplate.edges.map((edge) => ({
+  ...edge,
+  id: `edge-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+  source: nodeIdMap.get(edge.source) || edge.source,
+  target: nodeIdMap.get(edge.target) || edge.target,
+}));
+
+/**
+ * Main Playground Story
+ * 
+ * Single, comprehensive playground with tabs and multi-step configuration.
+ * Inspired by https://play.reactflow.dev/
+ */
+export const Playground: Story = {
+  name: 'Playground',
+  render: () => {
+    return (
+      <PlaygroundLayout
+        initialState={{
+          nodes: initialNodes,
+          edges: initialEdges,
+        }}
+      />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // Wait for playground to be rendered
+    await waitFor(() => {
+      expect(canvasElement).toBeInTheDocument();
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete interactive playground with tabs and multi-step configuration. Configure nodes, edges, canvas, background, layouts, validation, code generation, and settings all in one place.',
+      },
+    },
+  },
+};
+
+// State Stories
+export const PlaygroundState: Story = {
+  name: 'Playground State',
+  render: () => {
+    return (
+      <PlaygroundLayout
+        initialState={{
+          nodes: initialNodes,
+          edges: initialEdges,
+        }}
+      />
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Playground state - complete interactive playground interface.',
+      },
+    },
+  },
+};

package/src/ui/extensions/flow/organisms/FlowProvider.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import { FlowProvider } from './FlowProvider';
+import { useFlowContext } from './FlowContext';
+import type { Node, Edge } from '@xyflow/react';
+import type { FlowNodeData, FlowEdgeData } from './FlowTypes';
+
+// Test component that uses context
+function TestComponent() {
+  const context = useFlowContext();
+  return <div data-testid="context-value">{context ? 'context-available' : 'no-context'}</div>;
+}
+
+describe('FlowProvider', () => {
+  const mockNodes: Node<FlowNodeData>[] = [
+    {
+      id: '1',
+      type: 'default',
+      position: { x: 0, y: 0 },
+      data: { label: 'Test' },
+    },
+  ];
+  const mockEdges: Edge<FlowEdgeData>[] = [];
+  
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  
+  it('provides flow context to children', () => {
+    const { getByTestId } = render(
+      <FlowProvider nodes={mockNodes} edges={mockEdges}>
+        <TestComponent />
+      </FlowProvider>
+    );
+    
+    expect(getByTestId('context-value')).toHaveTextContent('context-available');
+  });
+  
+  it('handles controlled nodes', () => {
+    const handleNodesChange = vi.fn();
+    
+    const { getByTestId } = render(
+      <FlowProvider
+        nodes={mockNodes}
+        edges={mockEdges}
+        onNodesChange={handleNodesChange}
+      >
+        <TestComponent />
+      </FlowProvider>
+    );
+    
+    expect(getByTestId('context-value')).toHaveTextContent('context-available');
+  });
+  
+  it('handles uncontrolled nodes', () => {
+    const { getByTestId } = render(
+      <FlowProvider nodes={mockNodes} edges={mockEdges}>
+        <TestComponent />
+      </FlowProvider>
+    );
+    
+    expect(getByTestId('context-value')).toHaveTextContent('context-available');
+  });
+});

package/src/ui/extensions/flow/organisms/FlowProvider.tsx

@@ -0,0 +1,327 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import type { ReactNode } from 'react';
+import { ReactFlowProvider, applyNodeChanges, applyEdgeChanges } from '@xyflow/react';
+import type {
+  Node,
+  Edge,
+  NodeChange,
+  EdgeChange,
+  Connection,
+  ReactFlowInstance,
+} from '@xyflow/react';
+import { FlowContext, type FlowContextValue } from './FlowContext';
+import type {
+  FlowNodeData,
+  FlowEdgeData,
+  ValidationRule,
+  ConnectionRule,
+  LayoutStrategyName,
+  LayoutOptions,
+} from './FlowTypes';
+
+export interface FlowProviderProps<
+  TNodeData extends FlowNodeData = FlowNodeData,
+  TEdgeData extends FlowEdgeData = FlowEdgeData
+> {
+  // React Flow props
+  nodes?: Node<TNodeData>[];
+  edges?: Edge<TEdgeData>[];
+  defaultNodes?: Node<TNodeData>[];
+  defaultEdges?: Edge<TEdgeData>[];
+  onNodesChange?: (changes: NodeChange[]) => void;
+  onEdgesChange?: (changes: EdgeChange[]) => void;
+  onConnect?: (connection: Connection) => void;
+  /**
+   * Callback before deleting nodes/edges - return false to prevent deletion
+   */
+  onBeforeDelete?: (params: { nodes?: Node<TNodeData>[]; edges?: Edge<TEdgeData>[] }) => boolean | Promise<boolean>;
+  
+  // Design system props
+  theme?: 'light' | 'dark';
+  validationRules?: ValidationRule[];
+  connectionRules?: ConnectionRule[];
+  layoutStrategy?: LayoutStrategyName;
+  layoutOptions?: LayoutOptions;
+  
+  // Callbacks
+  onNodeAdd?: (node: Node<TNodeData>) => void;
+  onNodeRemove?: (nodeId: string) => void;
+  onNodeUpdate?: (nodeId: string, data: Partial<TNodeData>) => void;
+  onEdgeAdd?: (edge: Edge<TEdgeData>) => void;
+  onEdgeRemove?: (edgeId: string) => void;
+  onEdgeUpdate?: (edgeId: string, data: Partial<TEdgeData>) => void;
+  
+  children: ReactNode;
+}
+
+/**
+ * FlowProvider Component
+ * 
+ * Combines ReactFlowProvider (native) with FlowContext (design system).
+ * Manages flow state and provides it via Context.
+ * Supports both controlled and uncontrolled modes.
+ */
+export function FlowProvider<
+  TNodeData extends FlowNodeData = FlowNodeData,
+  TEdgeData extends FlowEdgeData = FlowEdgeData
+>({
+  nodes: controlledNodes,
+  edges: controlledEdges,
+  defaultNodes,
+  defaultEdges,
+  onNodesChange: controlledOnNodesChange,
+  onEdgesChange: controlledOnEdgesChange,
+  onConnect: controlledOnConnect,
+  onBeforeDelete,
+  theme: controlledTheme,
+  validationRules: controlledValidationRules = [],
+  connectionRules: controlledConnectionRules = [],
+  layoutStrategy: controlledLayoutStrategy,
+  layoutOptions: controlledLayoutOptions = {},
+  onNodeAdd,
+  onNodeRemove,
+  onNodeUpdate,
+  onEdgeAdd,
+  onEdgeRemove,
+  onEdgeUpdate,
+  children,
+}: FlowProviderProps<TNodeData, TEdgeData>) {
+  // Detect controlled/uncontrolled mode
+  const isNodesControlled = controlledOnNodesChange !== undefined || controlledNodes !== undefined;
+  const isEdgesControlled = controlledOnEdgesChange !== undefined || controlledEdges !== undefined;
+  const isThemeControlled = controlledTheme !== undefined;
+  const isLayoutStrategyControlled = controlledLayoutStrategy !== undefined;
+  
+  // Internal state (for uncontrolled mode)
+  // Use defaultNodes/defaultEdges if provided, otherwise use controlled or empty array
+  const initialNodes = controlledNodes || defaultNodes || [];
+  const initialEdges = controlledEdges || defaultEdges || [];
+  
+  const [internalNodes, setInternalNodes] = useState<Node<TNodeData>[]>(initialNodes);
+  const [internalEdges, setInternalEdges] = useState<Edge<TEdgeData>[]>(initialEdges);
+  const [internalTheme, setInternalTheme] = useState<'light' | 'dark'>(controlledTheme || 'light');
+  const [internalLayoutStrategy, setInternalLayoutStrategy] = useState<LayoutStrategyName | null>(
+    controlledLayoutStrategy || null
+  );
+  const [internalLayoutOptions, setInternalLayoutOptions] = useState<LayoutOptions>(
+    controlledLayoutOptions
+  );
+  
+  // Use controlled or internal state
+  const nodes = isNodesControlled ? (controlledNodes || internalNodes) : internalNodes;
+  const edges = isEdgesControlled ? (controlledEdges || internalEdges) : internalEdges;
+  const theme = isThemeControlled ? controlledTheme! : internalTheme;
+  const layoutStrategy = isLayoutStrategyControlled ? controlledLayoutStrategy || null : internalLayoutStrategy;
+  const layoutOptions = controlledLayoutOptions || internalLayoutOptions;
+  
+  // React Flow instance
+  const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null);
+  
+  // Validation rules state
+  const [validationRules, setValidationRules] = useState<ValidationRule[]>(controlledValidationRules);
+  const [connectionRules, setConnectionRules] = useState<ConnectionRule[]>(controlledConnectionRules);
+  
+  // Update validation rules when controlled prop changes
+  useMemo(() => {
+    if (controlledValidationRules.length > 0) {
+      setValidationRules(controlledValidationRules);
+    }
+  }, [controlledValidationRules]);
+  
+  useMemo(() => {
+    if (controlledConnectionRules.length > 0) {
+      setConnectionRules(controlledConnectionRules);
+    }
+  }, [controlledConnectionRules]);
+  
+  // Node change handler with onBeforeDelete support
+  const handleNodesChange = useCallback(async (changes: NodeChange[]) => {
+    // Check for delete operations and call onBeforeDelete if provided
+    const deleteChanges = changes.filter(c => c.type === 'remove');
+    if (deleteChanges.length > 0 && onBeforeDelete) {
+      const nodesToDelete = deleteChanges
+        .map(c => nodes.find(n => n.id === c.id))
+        .filter(Boolean) as Node<TNodeData>[];
+      
+      const canDelete = await onBeforeDelete({ nodes: nodesToDelete });
+      if (!canDelete) {
+        // Prevent deletion
+        return;
+      }
+    }
+    
+    if (isNodesControlled) {
+      controlledOnNodesChange?.(changes);
+    } else {
+      // Apply changes using React Flow's utility
+      setInternalNodes((prev) => {
+        const updated = applyNodeChanges(changes, prev);
+        
+        // Trigger callbacks for specific change types
+        changes.forEach((change) => {
+          if (change.type === 'remove') {
+            onNodeRemove?.(change.id);
+          } else if (change.type === 'add' && change.item) {
+            onNodeAdd?.(change.item as Node<TNodeData>);
+          }
+        });
+        
+        return updated;
+      });
+    }
+  }, [isNodesControlled, controlledOnNodesChange, onNodeRemove, onNodeAdd, onBeforeDelete, nodes]);
+  
+  // Edge change handler with onBeforeDelete support
+  const handleEdgesChange = useCallback(async (changes: EdgeChange[]) => {
+    // Check for delete operations and call onBeforeDelete if provided
+    const deleteChanges = changes.filter(c => c.type === 'remove');
+    if (deleteChanges.length > 0 && onBeforeDelete) {
+      const edgesToDelete = deleteChanges
+        .map(c => edges.find(e => e.id === c.id))
+        .filter(Boolean) as Edge<TEdgeData>[];
+      
+      const canDelete = await onBeforeDelete({ edges: edgesToDelete });
+      if (!canDelete) {
+        // Prevent deletion
+        return;
+      }
+    }
+    
+    if (isEdgesControlled) {
+      controlledOnEdgesChange?.(changes);
+    } else {
+      // Apply changes using React Flow's utility
+      setInternalEdges((prev) => {
+        const updated = applyEdgeChanges(changes, prev);
+        
+        // Trigger callbacks for specific change types
+        changes.forEach((change) => {
+          if (change.type === 'remove') {
+            onEdgeRemove?.(change.id);
+          } else if (change.type === 'add' && change.item) {
+            onEdgeAdd?.(change.item as Edge<TEdgeData>);
+          }
+        });
+        
+        return updated;
+      });
+    }
+  }, [isEdgesControlled, controlledOnEdgesChange, onEdgeRemove, onEdgeAdd, onBeforeDelete, edges]);
+  
+  // Connect handler
+  const handleConnect = useCallback((connection: Connection) => {
+    controlledOnConnect?.(connection);
+  }, [controlledOnConnect]);
+  
+  // Validation rule management
+  const addValidationRule = useCallback((rule: ValidationRule) => {
+    setValidationRules((prev) => [...prev, rule]);
+  }, []);
+  
+  const removeValidationRule = useCallback((id: string) => {
+    setValidationRules((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+  
+  // Connection rule management
+  const addConnectionRule = useCallback((rule: ConnectionRule) => {
+    setConnectionRules((prev) => [...prev, rule]);
+  }, []);
+  
+  const removeConnectionRule = useCallback((id: string) => {
+    setConnectionRules((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+  
+  // Set nodes/edges (for programmatic updates)
+  const setNodes = useCallback((
+    updater: Node<TNodeData>[] | ((prev: Node<TNodeData>[]) => Node<TNodeData>[])
+  ) => {
+    if (isNodesControlled) {
+      // In controlled mode, we can't directly set nodes
+      // The parent component should handle this
+      console.warn('Cannot set nodes in controlled mode. Use onNodesChange prop.');
+    } else {
+      setInternalNodes(updater);
+    }
+  }, [isNodesControlled]);
+  
+  const setEdges = useCallback((
+    updater: Edge<TEdgeData>[] | ((prev: Edge<TEdgeData>[]) => Edge<TEdgeData>[])
+  ) => {
+    if (isEdgesControlled) {
+      console.warn('Cannot set edges in controlled mode. Use onEdgesChange prop.');
+    } else {
+      setInternalEdges(updater);
+    }
+  }, [isEdgesControlled]);
+  
+  // Context value
+  const contextValue = useMemo<FlowContextValue<TNodeData, TEdgeData>>(() => ({
+    nodes,
+    edges,
+    reactFlowInstance,
+    setReactFlowInstance,
+    setNodes,
+    setEdges,
+    onNodesChange: handleNodesChange,
+    onEdgesChange: handleEdgesChange,
+    onConnect: handleConnect,
+    validationRules,
+    connectionRules,
+    addValidationRule,
+    removeValidationRule,
+    addConnectionRule,
+    removeConnectionRule,
+    layoutStrategy,
+    setLayoutStrategy: isLayoutStrategyControlled
+      ? () => console.warn('Cannot set layout strategy in controlled mode')
+      : setInternalLayoutStrategy,
+    layoutOptions,
+    setLayoutOptions: setInternalLayoutOptions,
+    theme,
+    setTheme: isThemeControlled
+      ? () => console.warn('Cannot set theme in controlled mode')
+      : setInternalTheme,
+    onNodeAdd,
+    onNodeRemove,
+    onNodeUpdate,
+    onEdgeAdd,
+    onEdgeRemove,
+    onEdgeUpdate,
+  }), [
+    nodes,
+    edges,
+    reactFlowInstance,
+    setNodes,
+    setEdges,
+    handleNodesChange,
+    handleEdgesChange,
+    handleConnect,
+    validationRules,
+    connectionRules,
+    addValidationRule,
+    removeValidationRule,
+    addConnectionRule,
+    removeConnectionRule,
+    layoutStrategy,
+    isLayoutStrategyControlled,
+    layoutOptions,
+    theme,
+    isThemeControlled,
+    onNodeAdd,
+    onNodeRemove,
+    onNodeUpdate,
+    onEdgeAdd,
+    onEdgeRemove,
+    onEdgeUpdate,
+  ]);
+  
+  return (
+    <ReactFlowProvider>
+      <FlowContext.Provider value={contextValue as FlowContextValue}>
+        {children}
+      </FlowContext.Provider>
+    </ReactFlowProvider>
+  );
+}