perf(e2e): ⚡️ Migrate to Playwright

apps/builder/components/board/graph/Graph.tsx

@@ -1,8 +1,8 @@
 import { Flex, FlexProps, useEventListener } from '@chakra-ui/react'
-import React, { useRef, useMemo } from 'react'
+import React, { useRef, useMemo, useEffect } from 'react'
 import { blockWidth, useGraph } from 'contexts/GraphContext'
 import { BlockNode } from './BlockNode/BlockNode'
-import { useDnd } from 'contexts/DndContext'
+import { useStepDnd } from 'contexts/StepDndContext'
 import { Edges } from './Edges'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
@@ -10,16 +10,23 @@ import { DraggableStepType } from 'models'
 
 const Graph = ({ ...props }: FlexProps) => {
   const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
-    useDnd()
+    useStepDnd()
   const graphContainerRef = useRef<HTMLDivElement | null>(null)
+  const editorContainerRef = useRef<HTMLDivElement | null>(null)
   const { createBlock, typebot } = useTypebot()
-  const { graphPosition, setGraphPosition } = useGraph()
+  const { graphPosition, setGraphPosition, setOpenedStepId } = useGraph()
   const transform = useMemo(
     () =>
       `translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
     [graphPosition]
   )
 
+  useEffect(() => {
+    editorContainerRef.current = document.getElementById(
+      'editor-container'
+    ) as HTMLDivElement
+  }, [])
+
   const handleMouseWheel = (e: WheelEvent) => {
     e.preventDefault()
     const isPinchingTrackpad = e.ctrlKey
@@ -57,6 +64,9 @@ const Graph = ({ ...props }: FlexProps) => {
   }
   useEventListener('mousedown', handleMouseDown, undefined, { capture: true })
 
+  const handleClick = () => setOpenedStepId(undefined)
+  useEventListener('click', handleClick, editorContainerRef.current)
+
   if (!typebot) return <></>
   return (
     <Flex ref={graphContainerRef} {...props}>