🛠️ Adapt Cypress to Turbo Repo

apps/builder/components/board/Board.tsx

@@ -1,13 +1,13 @@
 import { Flex } from '@chakra-ui/react'
 import React from 'react'
-import StepsList from './StepTypesList'
 import Graph from './graph/Graph'
 import { DndContext } from 'contexts/DndContext'
+import StepTypesList from './StepTypesList'
 
 export const Board = () => (
   <Flex flex="1" pos="relative" bgColor="gray.50">
     <DndContext>
-      <StepsList />
+      <StepTypesList />
       <Graph />
     </DndContext>
   </Flex>

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

@@ -10,7 +10,6 @@ import { StartBlockNode } from './BlockNode/StartBlockNode'
 const Graph = () => {
   const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
     useDnd()
-  const graphRef = useRef<HTMLDivElement | null>(null)
   const graphContainerRef = useRef<HTMLDivElement | null>(null)
   const { typebot } = useTypebot()
   const {
@@ -59,8 +58,8 @@ const Graph = () => {
     addNewBlock({
       step: draggedStep,
       type: draggedStepType,
-      x: e.x - graphPosition.x - blockWidth / 3,
-      y: e.y - graphPosition.y - 20,
+      x: e.clientX - graphPosition.x - blockWidth / 3,
+      y: e.clientY - graphPosition.y - 20,
     })
     setDraggedStep(undefined)
     setDraggedStepType(undefined)
@@ -69,11 +68,10 @@ const Graph = () => {
 
   if (!typebot) return <></>
   return (
-    <Flex ref={graphContainerRef} pos="relative" flex="1" h="full">
+    <Flex ref={graphContainerRef} flex="1" h="full">
       <Flex
-        ref={graphRef}
         flex="1"
-        h="full"
+        boxSize={'200px'}
         style={{
           transform,
         }}

apps/builder/components/dashboard/FolderContent/TypebotButton.tsx

@@ -85,7 +85,7 @@ export const TypebotButton = ({
       mb={6}
       rounded="lg"
       whiteSpace="normal"
-      data-testid="typebot-button"
+      data-testid={`typebot-button-${typebot.id}`}
       opacity={isDragging ? 0.2 : 1}
       ref={setNodeRef}
       {...listeners}