perf(e2e): ⚡️ Migrate to Playwright

apps/builder/contexts/GraphContext.tsx

@@ -65,6 +65,8 @@ const graphContext = createContext<{
   addSourceEndpoint: (endpoint: Endpoint) => void
   targetEndpoints: Table<Endpoint>
   addTargetEndpoint: (endpoint: Endpoint) => void
+  openedStepId?: string
+  setOpenedStepId: Dispatch<SetStateAction<string | undefined>>
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({
@@ -84,6 +86,7 @@ export const GraphProvider = ({ children }: { children: ReactNode }) => {
     byId: {},
     allIds: [],
   })
+  const [openedStepId, setOpenedStepId] = useState<string>()
 
   const addSourceEndpoint = (endpoint: Endpoint) => {
     setSourceEndpoints((endpoints) => ({
@@ -112,6 +115,8 @@ export const GraphProvider = ({ children }: { children: ReactNode }) => {
         targetEndpoints,
         addSourceEndpoint,
         addTargetEndpoint,
+        openedStepId,
+        setOpenedStepId,
       }}
     >
       {children}

apps/builder/contexts/StepDndContext.tsx

@@ -8,7 +8,7 @@ import {
   useState,
 } from 'react'
 
-const dndContext = createContext<{
+const stepDndContext = createContext<{
   draggedStepType?: DraggableStepType
   setDraggedStepType: Dispatch<SetStateAction<DraggableStepType | undefined>>
   draggedStep?: DraggableStep
@@ -21,7 +21,7 @@ const dndContext = createContext<{
   //@ts-ignore
 }>({})
 
-export const DndContext = ({ children }: { children: ReactNode }) => {
+export const StepDndContext = ({ children }: { children: ReactNode }) => {
   const [draggedStep, setDraggedStep] = useState<DraggableStep>()
   const [draggedStepType, setDraggedStepType] = useState<
     DraggableStepType | undefined
@@ -32,7 +32,7 @@ export const DndContext = ({ children }: { children: ReactNode }) => {
   const [mouseOverBlockId, setMouseOverBlockId] = useState<string>()
 
   return (
-    <dndContext.Provider
+    <stepDndContext.Provider
       value={{
         draggedStep,
         setDraggedStep,
@@ -45,8 +45,8 @@ export const DndContext = ({ children }: { children: ReactNode }) => {
       }}
     >
       {children}
-    </dndContext.Provider>
+    </stepDndContext.Provider>
   )
 }
 
-export const useDnd = () => useContext(dndContext)
+export const useStepDnd = () => useContext(stepDndContext)

apps/builder/contexts/TypebotDndContext.tsx

@@ -0,0 +1,45 @@
+import { Typebot } from 'models'
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+
+const typebotDndContext = createContext<{
+  draggedTypebot?: Typebot
+  setDraggedTypebot: Dispatch<SetStateAction<Typebot | undefined>>
+  mouseOverFolderId?: string | null
+  setMouseOverFolderId: Dispatch<SetStateAction<string | undefined | null>>
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+}>({})
+
+export const TypebotDndContext = ({ children }: { children: ReactNode }) => {
+  const [draggedTypebot, setDraggedTypebot] = useState<Typebot>()
+  const [mouseOverFolderId, setMouseOverFolderId] = useState<string | null>()
+
+  useEffect(() => {
+    draggedTypebot
+      ? document.body.classList.add('grabbing')
+      : document.body.classList.remove('grabbing')
+  }, [draggedTypebot])
+
+  return (
+    <typebotDndContext.Provider
+      value={{
+        draggedTypebot,
+        setDraggedTypebot,
+        mouseOverFolderId,
+        setMouseOverFolderId,
+      }}
+    >
+      {children}
+    </typebotDndContext.Provider>
+  )
+}
+
+export const useTypebotDnd = () => useContext(typebotDndContext)

apps/builder/contexts/UserContext.tsx

@@ -82,11 +82,6 @@ export const UserContext = ({ children }: { children: ReactNode }) => {
     setIsSaving(false)
   }
 
-  const refreshUser = async () => {
-    await fetch('/api/auth/session?update')
-    reloadSession()
-  }
-
   return (
     <userContext.Provider
       value={{
@@ -105,6 +100,11 @@ export const UserContext = ({ children }: { children: ReactNode }) => {
   )
 }
 
+export const refreshUser = async () => {
+  await fetch('/api/auth/session?update')
+  reloadSession()
+}
+
 const reloadSession = () => {
   const event = new Event('visibilitychange')
   document.dispatchEvent(event)