🚀 Init bot-engine

apps/builder/contexts/BoardContext.tsx

@@ -0,0 +1,59 @@
+import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui'
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useState,
+} from 'react'
+import { Step } from 'bot-engine'
+
+type Position = { x: number; y: number; scale: number }
+
+const graphPositionDefaultValue = { x: 400, y: 100, scale: 1 }
+
+const graphContext = createContext<{
+  position: Position
+  setGraphPosition: Dispatch<SetStateAction<Position>>
+  plumbInstance?: BrowserJsPlumbInstance
+  setPlumbInstance: Dispatch<SetStateAction<BrowserJsPlumbInstance | undefined>>
+  draggedStep?: Step
+  setDraggedStep: Dispatch<SetStateAction<Step | undefined>>
+}>({
+  position: graphPositionDefaultValue,
+  setGraphPosition: () => {
+    console.log("I'm not instantiated")
+  },
+  setPlumbInstance: () => {
+    console.log("I'm not instantiated")
+  },
+  setDraggedStep: () => {
+    console.log("I'm not instantiated")
+  },
+})
+
+export const GraphProvider = ({ children }: { children: ReactNode }) => {
+  const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
+  const [plumbInstance, setPlumbInstance] = useState<
+    BrowserJsPlumbInstance | undefined
+  >()
+  const [draggedStep, setDraggedStep] = useState<Step | undefined>()
+
+  return (
+    <graphContext.Provider
+      value={{
+        position: graphPosition,
+        setGraphPosition,
+        plumbInstance,
+        setPlumbInstance,
+        draggedStep,
+        setDraggedStep,
+      }}
+    >
+      {children}
+    </graphContext.Provider>
+  )
+}
+
+export const useGraph = () => useContext(graphContext)

apps/builder/package.json

@@ -15,6 +15,7 @@
     "@dnd-kit/core": "^4.0.3",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@jsplumb/browser-ui": "^5.2.3",
     "@next-auth/prisma-adapter": "next",
     "focus-visible": "^5.2.0",
     "framer-motion": "^4",

apps/builder/pages/typebots/[id].tsx

@@ -0,0 +1,19 @@
+import { Flex } from '@chakra-ui/layout'
+import { Seo } from 'components/Seo'
+import { GraphProvider } from 'contexts/BoardContext'
+import React from 'react'
+
+const TypebotEditPage = () => {
+  return (
+    <>
+      <Seo title="Editor" />
+      <Flex overflow="hidden" h="100vh">
+        <GraphProvider>
+          <></>
+        </GraphProvider>
+      </Flex>
+    </>
+  )
+}
+
+export default TypebotEditPage