Add Graph draft

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

@@ -0,0 +1,112 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Stack,
+  useEventListener,
+} from '@chakra-ui/react'
+import React, { useEffect, useRef, useState } from 'react'
+import { Block, StartBlock } from 'bot-engine'
+import { useGraph } from 'contexts/GraphContext'
+import { useDnd } from 'contexts/DndContext'
+import { StepsList } from './StepsList'
+import { isNotDefined } from 'services/utils'
+
+export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
+  const {
+    updateBlockPosition,
+    addNewStepToBlock,
+    connectingIds,
+    setConnectingIds,
+  } = useGraph()
+  const { draggedStep, draggedStepType, setDraggedStepType, setDraggedStep } =
+    useDnd()
+  const blockRef = useRef<HTMLDivElement | null>(null)
+  const [isMouseDown, setIsMouseDown] = useState(false)
+  const [titleValue, setTitleValue] = useState(block.title)
+  const [showSortPlaceholders, setShowSortPlaceholders] = useState(false)
+  const [isConnecting, setIsConnecting] = useState(false)
+
+  useEffect(() => {
+    setIsConnecting(
+      connectingIds?.target?.blockId === block.id &&
+        isNotDefined(connectingIds.target?.stepId)
+    )
+  }, [block.id, connectingIds])
+
+  const handleTitleChange = (title: string) => setTitleValue(title)
+
+  const handleMouseDown = () => {
+    setIsMouseDown(true)
+  }
+  const handleMouseUp = () => {
+    setIsMouseDown(false)
+  }
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!isMouseDown) return
+    const { movementX, movementY } = event
+
+    updateBlockPosition(block.id, {
+      x: block.graphCoordinates.x + movementX,
+      y: block.graphCoordinates.y + movementY,
+    })
+  }
+
+  useEventListener('mousemove', handleMouseMove)
+
+  const handleMouseEnter = () => {
+    if (draggedStepType || draggedStep) setShowSortPlaceholders(true)
+    if (connectingIds)
+      setConnectingIds({ ...connectingIds, target: { blockId: block.id } })
+  }
+
+  const handleMouseLeave = () => {
+    setShowSortPlaceholders(false)
+    if (connectingIds) setConnectingIds({ ...connectingIds, target: undefined })
+  }
+
+  const handleStepDrop = (index: number) => {
+    setShowSortPlaceholders(false)
+    if (draggedStepType) {
+      addNewStepToBlock(block.id, draggedStepType, index)
+      setDraggedStepType(undefined)
+    }
+    if (draggedStep) {
+      addNewStepToBlock(block.id, draggedStep, index)
+      setDraggedStep(undefined)
+    }
+  }
+
+  return (
+    <Stack
+      p="4"
+      rounded="lg"
+      bgColor="blue.50"
+      borderWidth="2px"
+      borderColor={isConnecting ? 'blue.400' : 'gray.400'}
+      minW="300px"
+      transition="border 300ms"
+      pos="absolute"
+      style={{
+        transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
+      }}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      ref={blockRef}
+    >
+      <Editable value={titleValue} onChange={handleTitleChange}>
+        <EditablePreview _hover={{ bgColor: 'blue.100' }} px="1" />
+        <EditableInput minW="0" px="1" />
+      </Editable>
+      <StepsList
+        blockId={block.id}
+        steps={block.steps}
+        showSortPlaceholders={showSortPlaceholders}
+        onMouseUp={handleStepDrop}
+      />
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StartBlockNode.tsx

@@ -0,0 +1,66 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Stack,
+  useEventListener,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { StartBlock } from 'bot-engine'
+import { useGraph } from 'contexts/GraphContext'
+import { StepNode } from './StepNode'
+
+export const StartBlockNode = ({ block }: { block: StartBlock }) => {
+  const { setStartBlock } = useGraph()
+  const [isMouseDown, setIsMouseDown] = useState(false)
+  const [titleValue, setTitleValue] = useState(block.title)
+
+  const handleTitleChange = (title: string) => setTitleValue(title)
+
+  const handleMouseDown = () => {
+    setIsMouseDown(true)
+  }
+  const handleMouseUp = () => {
+    setIsMouseDown(false)
+  }
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!isMouseDown) return
+    const { movementX, movementY } = event
+
+    setStartBlock({
+      ...block,
+      graphCoordinates: {
+        x: block.graphCoordinates.x + movementX,
+        y: block.graphCoordinates.y + movementY,
+      },
+    })
+  }
+
+  useEventListener('mousemove', handleMouseMove)
+
+  return (
+    <Stack
+      p="4"
+      rounded="lg"
+      bgColor="blue.50"
+      borderWidth="2px"
+      borderColor="gray.400"
+      minW="300px"
+      transition="border 300ms"
+      pos="absolute"
+      style={{
+        transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
+      }}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      spacing="14px"
+    >
+      <Editable value={titleValue} onChange={handleTitleChange}>
+        <EditablePreview _hover={{ bgColor: 'blue.100' }} px="1" />
+        <EditableInput minW="0" px="1" />
+      </Editable>
+      <StepNode step={block.steps[0]} isConnectable={true} />
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/SourceEndpoint.tsx

@@ -0,0 +1,26 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import React, { MouseEvent } from 'react'
+
+export const SourceEndpoint = ({
+  onConnectionDragStart,
+  ...props
+}: BoxProps & {
+  onConnectionDragStart?: () => void
+}) => {
+  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
+    if (!onConnectionDragStart) return
+    e.stopPropagation()
+    onConnectionDragStart()
+  }
+
+  return (
+    <Box
+      boxSize="15px"
+      rounded="full"
+      bgColor="gray.500"
+      onMouseDown={handleMouseDown}
+      cursor="pointer"
+      {...props}
+    />
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx

@@ -0,0 +1,205 @@
+import { Box, Flex, HStack, StackProps, Text } from '@chakra-ui/react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Block, StartStep, Step, StepType } from 'bot-engine'
+import { SourceEndpoint } from './SourceEndpoint'
+import { useGraph } from 'contexts/GraphContext'
+import { StepIcon } from 'components/board/StepTypesList/StepIcon'
+import { isDefined } from 'services/utils'
+
+export const StepNode = ({
+  step,
+  isConnectable,
+  onMouseMoveBottomOfElement,
+  onMouseMoveTopOfElement,
+  onMouseDown,
+}: {
+  step: Step | StartStep
+  isConnectable: boolean
+  onMouseMoveBottomOfElement?: () => void
+  onMouseMoveTopOfElement?: () => void
+  onMouseDown?: (e: React.MouseEvent, step: Step) => void
+}) => {
+  const stepRef = useRef<HTMLDivElement | null>(null)
+  const {
+    setConnectingIds,
+    removeStepFromBlock,
+    blocks,
+    connectingIds,
+    startBlock,
+  } = useGraph()
+  const [isConnecting, setIsConnecting] = useState(false)
+
+  useEffect(() => {
+    setIsConnecting(
+      connectingIds?.target?.blockId === step.blockId &&
+        connectingIds?.target?.stepId === step.id
+    )
+  }, [connectingIds, step.blockId, step.id])
+
+  const handleMouseEnter = () => {
+    if (connectingIds?.target)
+      setConnectingIds({
+        ...connectingIds,
+        target: { ...connectingIds.target, stepId: step.id },
+      })
+  }
+
+  const handleMouseLeave = () => {
+    if (connectingIds?.target)
+      setConnectingIds({
+        ...connectingIds,
+        target: { ...connectingIds.target, stepId: undefined },
+      })
+  }
+
+  const handleConnectionDragStart = () => {
+    setConnectingIds({ blockId: step.blockId, stepId: step.id })
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!onMouseDown) return
+    e.stopPropagation()
+    onMouseDown(e, step as Step)
+    removeStepFromBlock(step.blockId, step.id)
+  }
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
+    const element = event.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const y = event.clientY - rect.top
+    if (y > rect.height / 2) onMouseMoveBottomOfElement()
+    else onMouseMoveTopOfElement()
+  }
+
+  const connectedStubPosition: 'right' | 'left' | undefined = useMemo(() => {
+    const currentBlock = [startBlock, ...blocks].find(
+      (b) => b?.id === step.blockId
+    )
+    const isDragginConnectorFromCurrentBlock =
+      connectingIds?.blockId === currentBlock?.id &&
+      connectingIds?.target?.blockId
+    const targetBlockId = isDragginConnectorFromCurrentBlock
+      ? connectingIds.target?.blockId
+      : step.target?.blockId
+    const targetedBlock = targetBlockId
+      ? blocks.find((b) => b.id === targetBlockId)
+      : undefined
+    return targetedBlock
+      ? targetedBlock.graphCoordinates.x <
+        (currentBlock as Block).graphCoordinates.x
+        ? 'left'
+        : 'right'
+      : undefined
+  }, [
+    blocks,
+    connectingIds?.blockId,
+    connectingIds?.target?.blockId,
+    step.blockId,
+    step.target?.blockId,
+    startBlock,
+  ])
+
+  return (
+    <Flex
+      pos="relative"
+      ref={stepRef}
+      onMouseMove={handleMouseMove}
+      onMouseDown={handleMouseDown}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {connectedStubPosition === 'left' && (
+        <Box
+          h="2px"
+          pos="absolute"
+          left="-18px"
+          top="25px"
+          w="18px"
+          bgColor="blue.500"
+        />
+      )}
+      <HStack
+        flex="1"
+        userSelect="none"
+        p="3"
+        borderWidth="2px"
+        borderColor={isConnecting ? 'blue.400' : 'gray.400'}
+        rounded="lg"
+        cursor={'grab'}
+        bgColor="white"
+      >
+        <StepIcon type={step.type} />
+        <StepContent {...step} />
+        {isConnectable && (
+          <SourceEndpoint
+            onConnectionDragStart={handleConnectionDragStart}
+            pos="absolute"
+            right="20px"
+          />
+        )}
+      </HStack>
+
+      {isDefined(connectedStubPosition) && (
+        <Box
+          h="2px"
+          pos="absolute"
+          right={connectedStubPosition === 'left' ? undefined : '-18px'}
+          left={connectedStubPosition === 'left' ? '-18px' : undefined}
+          top="25px"
+          w="18px"
+          bgColor="gray.500"
+        />
+      )}
+    </Flex>
+  )
+}
+
+export const StepContent = (props: Step | StartStep) => {
+  switch (props.type) {
+    case StepType.TEXT: {
+      return (
+        <Text opacity={props.content === '' ? '0.5' : '1'}>
+          {props.content === '' ? 'Type text...' : props.content}
+        </Text>
+      )
+    }
+    case StepType.DATE_PICKER: {
+      return (
+        <Text opacity={props.content === '' ? '0.5' : '1'}>
+          {props.content === '' ? 'Pick a date...' : props.content}
+        </Text>
+      )
+    }
+    case StepType.START: {
+      return <Text>{props.label}</Text>
+    }
+    default: {
+      return <Text>No input</Text>
+    }
+  }
+}
+
+export const StepNodeOverlay = ({
+  step,
+  ...props
+}: { step: Step } & StackProps) => {
+  return (
+    <HStack
+      p="3"
+      borderWidth="1px"
+      rounded="lg"
+      bgColor="white"
+      cursor={'grab'}
+      pos="fixed"
+      top="0"
+      left="0"
+      w="264px"
+      pointerEvents="none"
+      {...props}
+    >
+      <StepIcon type={step.type} />
+      <StepContent {...step} />
+    </HStack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/index.tsx

@@ -0,0 +1 @@
+export { StepNode, StepNodeOverlay } from './StepNode'

apps/builder/components/board/graph/BlockNode/StepsList.tsx

@@ -0,0 +1,129 @@
+import { useEventListener, Stack, Flex, Portal } from '@chakra-ui/react'
+import { StartStep, Step } from 'bot-engine'
+import { useDnd } from 'contexts/DndContext'
+import { useState } from 'react'
+import { StepNode, StepNodeOverlay } from './StepNode'
+
+export const StepsList = ({
+  blockId,
+  steps,
+  showSortPlaceholders,
+  onMouseUp,
+}: {
+  blockId: string
+  steps: Step[] | [StartStep]
+  showSortPlaceholders: boolean
+  onMouseUp: (index: number) => void
+}) => {
+  const { draggedStep, setDraggedStep, draggedStepType } = useDnd()
+  const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
+    number | undefined
+  >()
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+  })
+  const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
+
+  const handleStepMove = (event: MouseEvent) => {
+    if (!draggedStep) return
+    const { clientX, clientY } = event
+    setPosition({
+      ...position,
+      x: clientX - relativeCoordinates.x,
+      y: clientY - relativeCoordinates.y,
+    })
+  }
+  useEventListener('mousemove', handleStepMove)
+
+  const handleMouseMove = (event: React.MouseEvent) => {
+    if (!draggedStep) return
+    const element = event.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const y = event.clientY - rect.top
+    if (y < 20) setExpandedPlaceholderIndex(0)
+  }
+
+  const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (expandedPlaceholderIndex === undefined) return
+    e.stopPropagation()
+    setExpandedPlaceholderIndex(undefined)
+    onMouseUp(expandedPlaceholderIndex)
+  }
+
+  const handleStepMouseDown = (e: React.MouseEvent, step: Step) => {
+    const element = e.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const relativeX = e.clientX - rect.left
+    const relativeY = e.clientY - rect.top
+    setPosition({ x: e.clientX - relativeX, y: e.clientY - relativeY })
+    setRelativeCoordinates({ x: relativeX, y: relativeY })
+    setDraggedStep(step)
+  }
+
+  const handleMouseOnTopOfStep = (stepIndex: number) => {
+    if (!draggedStep && !draggedStepType) return
+    setExpandedPlaceholderIndex(stepIndex === 0 ? 0 : stepIndex)
+  }
+
+  const handleMouseOnBottomOfStep = (stepIndex: number) => {
+    if (!draggedStep && !draggedStepType) return
+    setExpandedPlaceholderIndex(stepIndex + 1)
+  }
+  return (
+    <Stack
+      spacing={1}
+      onMouseUpCapture={handleMouseUp}
+      onMouseMove={handleMouseMove}
+      transition="none"
+    >
+      <Flex
+        h={
+          showSortPlaceholders && expandedPlaceholderIndex === 0
+            ? '50px'
+            : '2px'
+        }
+        bgColor={'gray.400'}
+        visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+        rounded="lg"
+        transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+      />
+      {steps.map((step, idx) => (
+        <Stack key={step.id} spacing={1}>
+          <StepNode
+            key={step.id}
+            step={step}
+            isConnectable={steps.length - 1 === idx}
+            onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
+            onMouseMoveBottomOfElement={() => {
+              handleMouseOnBottomOfStep(idx)
+            }}
+            onMouseDown={handleStepMouseDown}
+          />
+          <Flex
+            h={
+              showSortPlaceholders && expandedPlaceholderIndex === idx + 1
+                ? '50px'
+                : '2px'
+            }
+            bgColor={'gray.400'}
+            visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+            rounded="lg"
+            transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+          />
+        </Stack>
+      ))}
+      {draggedStep && draggedStep.blockId === blockId && (
+        <Portal>
+          <StepNodeOverlay
+            step={draggedStep}
+            onMouseUp={handleMouseUp}
+            style={{
+              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+            }}
+          />
+        </Portal>
+      )}
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/index.tsx

@@ -0,0 +1 @@
+export { BlockNode } from './BlockNode'