🚀 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

package.json

@@ -10,6 +10,7 @@
     "builder": "yarn workspace builder",
     "viewer": "yarn workspace viewer",
     "db": "yarn workspace db",
+    "bot-engine": "yarn workspace bot-engine",
     "db:up": "docker-compose up -d && yarn db prisma db push",
     "db:nuke": "docker-compose down --volumes --remove-orphans",
     "dev": "concurrently -n builder,viewer \"yarn builder dev\" \"yarn viewer dev\"",

packages/bot-engine/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+# Keep environment variables out of version control
+.env
+
+dist

packages/bot-engine/README.md

@@ -0,0 +1 @@
+# bot-engine

packages/bot-engine/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bot-engine",
+  "packageManager": "yarn@3.1.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@types/react": "^17.0.37",
+    "npm-run-all": "^4.1.5",
+    "react": "^17.0.2",
+    "rollup": "^2.60.2",
+    "rollup-plugin-dts": "^4.0.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "^2.2.19",
+    "typescript": "^4.5.2"
+  },
+  "scripts": {
+    "build": "run-s tailwind:generate rollup",
+    "tailwind:generate": "tailwindcss -o src/style.css",
+    "rollup": "rollup -c"
+  }
+}

packages/bot-engine/rollup.config.js

@@ -0,0 +1,37 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import dts from 'rollup-plugin-dts'
+import postcss from 'rollup-plugin-postcss'
+
+const packageJson = require('./package.json')
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json' }),
+      postcss(),
+    ],
+  },
+  {
+    input: 'dist/esm/types/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    plugins: [dts()],
+    external: [/\.css$/],
+  },
+]

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { PublicTypebot } from 'db'
+import '../style.css'
+
+export const TypebotViewer = (props: PublicTypebot) => {
+  return <div>{props.name}</div>
+}

packages/bot-engine/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components/TypebotViewer'
+export * from './models'

packages/bot-engine/src/models/index.ts

@@ -0,0 +1 @@
+export * from './typebot'

packages/bot-engine/src/models/typebot.ts

@@ -0,0 +1,58 @@
+import { Typebot as TypebotFromPrisma } from 'db'
+
+export type Typebot = TypebotFromPrisma & { blocks: Block[] }
+
+export type Block = {
+  id: string
+  title: string
+  steps: Step[]
+  boardCoordinates: {
+    x: number
+    y: number
+  }
+}
+
+export enum StepType {
+  TEXT = 'text',
+  IMAGE = 'image',
+  BUTTONS = 'buttons',
+  DATE_PICKER = 'date picker',
+}
+
+type Target = { blockId: string; stepId?: string }
+
+export type Step = { id: string; blockId: string; target?: Target } & (
+  | TextStep
+  | ImageStep
+  | ButtonsStep
+  | DatePickerStep
+)
+
+export type TextStep = {
+  type: StepType.TEXT
+  content: string
+}
+
+export type ImageStep = {
+  type: StepType.IMAGE
+  content: { url: string }
+}
+
+export type ButtonsStep = {
+  type: StepType.BUTTONS
+  buttons: Button[]
+}
+
+export type DatePickerStep = {
+  type: StepType.DATE_PICKER
+  content: string
+}
+
+export type Button = {
+  id: string
+  content: string
+  target: {
+    type: 'block' | 'step'
+    id: string
+  }
+}