refactor(editor): ♻️ Undo / Redo buttons + structure refacto

Yet another huge refacto... While implementing undo and redo features I understood that I updated the stored typebot too many times (i.e. on each key input) so I had to rethink it entirely. I also moved around some files.
2022-02-02 08:05:02 +01:00
parent fc1d654772
commit 8a350eee6c
153 changed files with 1512 additions and 1352 deletions
--- a/apps/builder/components/editor/StepsSideBar/StepSideBar.tsx
+++ b/apps/builder/components/editor/StepsSideBar/StepSideBar.tsx
@ -0,0 +1,187 @@
+import {
+  Stack,
+  Text,
+  SimpleGrid,
+  useEventListener,
+  Portal,
+  Flex,
+  IconButton,
+  Tooltip,
+  Fade,
+} from '@chakra-ui/react'
+import {
+  BubbleStepType,
+  DraggableStepType,
+  InputStepType,
+  IntegrationStepType,
+  LogicStepType,
+} from 'models'
+import { useStepDnd } from 'contexts/StepDndContext'
+import React, { useState } from 'react'
+import { StepCard, StepCardOverlay } from './StepCard'
+import { LockedIcon, UnlockedIcon } from 'assets/icons'
+import { headerHeight } from 'components/shared/TypebotHeader'
+
+export const StepsSideBar = () => {
+  const { setDraggedStepType, draggedStepType } = useStepDnd()
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+  })
+  const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
+  const [isLocked, setIsLocked] = useState(true)
+  const [isExtended, setIsExtended] = useState(true)
+
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!draggedStepType) return
+    const { clientX, clientY } = event
+    setPosition({
+      ...position,
+      x: clientX - relativeCoordinates.x,
+      y: clientY - relativeCoordinates.y,
+    })
+  }
+  useEventListener('mousemove', handleMouseMove)
+
+  const handleMouseDown = (e: React.MouseEvent, type: DraggableStepType) => {
+    const element = e.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    setPosition({ x: rect.left, y: rect.top })
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    setRelativeCoordinates({ x, y })
+    setDraggedStepType(type)
+  }
+
+  const handleMouseUp = () => {
+    if (!draggedStepType) return
+    setDraggedStepType(undefined)
+    setPosition({
+      x: 0,
+      y: 0,
+    })
+  }
+  useEventListener('mouseup', handleMouseUp)
+
+  const handleLockClick = () => setIsLocked(!isLocked)
+
+  const handleDockBarEnter = () => setIsExtended(true)
+
+  const handleMouseLeave = () => {
+    if (isLocked) return
+    setIsExtended(false)
+  }
+
+  return (
+    <Flex
+      w="340px"
+      pos="absolute"
+      left="0"
+      h={`calc(100vh - ${headerHeight}px)`}
+      zIndex="2"
+      pl="4"
+      py="4"
+      onMouseLeave={handleMouseLeave}
+      transform={isExtended ? 'translateX(0)' : 'translateX(-340px)'}
+      transition="transform 350ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s"
+    >
+      <Stack
+        w="full"
+        rounded="lg"
+        shadow="xl"
+        borderWidth="1px"
+        pt="2"
+        pb="4"
+        px="2"
+        bgColor="gray.50"
+        spacing={6}
+        userSelect="none"
+      >
+        <Flex justifyContent="flex-end">
+          <Tooltip label={isLocked ? 'Unlock sidebar' : 'Lock sidebar'}>
+            <IconButton
+              icon={isLocked ? <LockedIcon /> : <UnlockedIcon />}
+              aria-label={isLocked ? 'Unlock' : 'Lock'}
+              size="sm"
+              variant="outline"
+              onClick={handleLockClick}
+            />
+          </Tooltip>
+        </Flex>
+
+        <Stack>
+          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+            Bubbles
+          </Text>
+          <SimpleGrid columns={2} spacing="2">
+            {Object.values(BubbleStepType).map((type) => (
+              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            ))}
+          </SimpleGrid>
+        </Stack>
+
+        <Stack>
+          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+            Inputs
+          </Text>
+          <SimpleGrid columns={2} spacing="2">
+            {Object.values(InputStepType).map((type) => (
+              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            ))}
+          </SimpleGrid>
+        </Stack>
+
+        <Stack>
+          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+            Logic
+          </Text>
+          <SimpleGrid columns={2} spacing="2">
+            {Object.values(LogicStepType).map((type) => (
+              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            ))}
+          </SimpleGrid>
+        </Stack>
+
+        <Stack>
+          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+            Integrations
+          </Text>
+          <SimpleGrid columns={2} spacing="2">
+            {Object.values(IntegrationStepType).map((type) => (
+              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            ))}
+          </SimpleGrid>
+        </Stack>
+
+        {draggedStepType && (
+          <Portal>
+            <StepCardOverlay
+              type={draggedStepType}
+              onMouseUp={handleMouseUp}
+              pos="fixed"
+              top="0"
+              left="0"
+              style={{
+                transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+              }}
+            />
+          </Portal>
+        )}
+      </Stack>
+      <Fade in={!isLocked} unmountOnExit>
+        <Flex
+          pos="absolute"
+          h="100%"
+          right="-50px"
+          w="50px"
+          top="0"
+          justify="center"
+          align="center"
+          onMouseEnter={handleDockBarEnter}
+        >
+          <Flex w="5px" h="20px" bgColor="gray.400" rounded="md" />
+        </Flex>
+      </Fade>
+    </Flex>
+  )
+}