feat(editor): 💄 UI bump

2022-03-31 09:49:23 +02:00
parent c7d5373127
commit 7f5d2f4173
16 changed files with 105 additions and 48 deletions
--- a/apps/builder/components/editor/StepsSideBar/StepCard.tsx
+++ b/apps/builder/components/editor/StepsSideBar/StepCard.tsx
@ -25,13 +25,13 @@ export const StepCard = ({
    <Flex pos="relative">
      <HStack
        borderWidth="1px"
+        borderColor="gray.200"
        rounded="lg"
        flex="1"
        cursor={'grab'}
        opacity={isMouseDown ? '0.4' : '1'}
        onMouseDown={handleMouseDown}
-        bgColor="white"
-        shadow="sm"
+        bgColor="gray.50"
        px="4"
        py="2"
        _hover={{ shadow: 'md' }}
--- a/apps/builder/components/editor/StepsSideBar/StepSideBar.tsx
+++ b/apps/builder/components/editor/StepsSideBar/StepSideBar.tsx
@ -74,7 +74,7 @@ export const StepsSideBar = () => {

  return (
    <Flex
-      w="340px"
+      w="360px"
      pos="absolute"
      left="0"
      h={`calc(100vh - ${headerHeight}px)`}
@ -82,7 +82,7 @@ export const StepsSideBar = () => {
      pl="4"
      py="4"
      onMouseLeave={handleMouseLeave}
-      transform={isExtended ? 'translateX(0)' : 'translateX(-340px)'}
+      transform={isExtended ? 'translateX(0)' : 'translateX(-350px)'}
      transition="transform 350ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s"
    >
      <Stack
@ -92,8 +92,8 @@ export const StepsSideBar = () => {
        borderWidth="1px"
        pt="2"
        pb="10"
-        px="2"
-        bgColor="gray.50"
+        px="4"
+        bgColor="white"
        spacing={6}
        userSelect="none"
        overflowY="scroll"
@ -115,7 +115,7 @@ export const StepsSideBar = () => {
          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
            Bubbles
          </Text>
-          <SimpleGrid columns={2} spacing="2">
+          <SimpleGrid columns={2} spacing="3">
            {Object.values(BubbleStepType).map((type) => (
              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
            ))}
@ -126,7 +126,7 @@ export const StepsSideBar = () => {
          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
            Inputs
          </Text>
-          <SimpleGrid columns={2} spacing="2">
+          <SimpleGrid columns={2} spacing="3">
            {Object.values(InputStepType).map((type) => (
              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
            ))}
@ -137,7 +137,7 @@ export const StepsSideBar = () => {
          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
            Logic
          </Text>
-          <SimpleGrid columns={2} spacing="2">
+          <SimpleGrid columns={2} spacing="3">
            {Object.values(LogicStepType).map((type) => (
              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
            ))}
@ -148,7 +148,7 @@ export const StepsSideBar = () => {
          <Text fontSize="sm" fontWeight="semibold" color="gray.600">
            Integrations
          </Text>
-          <SimpleGrid columns={2} spacing="2">
+          <SimpleGrid columns={2} spacing="3">
            {Object.values(IntegrationStepType).map((type) => (
              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
            ))}
--- a/apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx
+++ b/apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx
@ -2,6 +2,7 @@ import { useEventListener } from '@chakra-ui/hooks'
 import assert from 'assert'
 import { useGraph, ConnectingIds } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { colors } from 'libs/theme'
 import React, { useMemo, useState } from 'react'
 import {
  computeConnectingEdgePath,
@ -91,7 +92,7 @@ export const DrawingEdge = () => {
  return (
    <path
      d={path}
-      stroke="#1a5fff"
+      stroke={colors.blue[400]}
      strokeWidth="2px"
      markerEnd="url(#blue-arrow)"
      fill="none"
--- a/apps/builder/components/shared/Graph/Edges/Edge.tsx
+++ b/apps/builder/components/shared/Graph/Edges/Edge.tsx
@ -10,6 +10,7 @@ import { Edge as EdgeProps } from 'models'
 import { Portal, useDisclosure } from '@chakra-ui/react'
 import { useTypebot } from 'contexts/TypebotContext'
 import { EdgeMenu } from './EdgeMenu'
+import { colors } from 'libs/theme'

 export type AnchorsPositionProps = {
  sourcePosition: Coordinates
@ -124,7 +125,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
      <path
        data-testid="edge"
        d={path}
-        stroke={isPreviewing ? '#1a5fff' : '#718096'}
+        stroke={isPreviewing ? colors.blue[400] : colors.gray[400]}
        strokeWidth="2px"
        markerEnd={isPreviewing ? 'url(#blue-arrow)' : 'url(#arrow)'}
        fill="none"
--- a/apps/builder/components/shared/Graph/Edges/Edges.tsx
+++ b/apps/builder/components/shared/Graph/Edges/Edges.tsx
@ -1,4 +1,5 @@
 import { chakra } from '@chakra-ui/system'
+import { colors } from 'libs/theme'
 import { Edge as EdgeProps } from 'models'
 import React from 'react'
 import { AnswersCount } from 'services/analytics'
@ -51,7 +52,7 @@ export const Edges = ({
      >
        <path
          d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
-          fill="#718096"
+          fill={colors.gray[400]}
        />
      </marker>
      <marker
@ -66,7 +67,7 @@ export const Edges = ({
      >
        <path
          d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
-          fill="#1a5fff"
+          fill={colors.blue[400]}
        />
      </marker>
      <marker
--- a/apps/builder/components/shared/Graph/Endpoints/SourceEndpoint.tsx
+++ b/apps/builder/components/shared/Graph/Endpoints/SourceEndpoint.tsx
@ -1,4 +1,4 @@
-import { Box, BoxProps, Flex } from '@chakra-ui/react'
+import { BoxProps, Flex } from '@chakra-ui/react'
 import { useGraph } from 'contexts/GraphContext'
 import { Source } from 'models'
 import React, { MouseEvent, useEffect, useRef, useState } from 'react'
@ -10,7 +10,12 @@ export const SourceEndpoint = ({
  source: Source
 }) => {
  const [ranOnce, setRanOnce] = useState(false)
-  const { setConnectingIds, addSourceEndpoint, blocksCoordinates } = useGraph()
+  const {
+    setConnectingIds,
+    addSourceEndpoint,
+    blocksCoordinates,
+    previewingEdge,
+  } = useGraph()
  const ref = useRef<HTMLDivElement | null>(null)

  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
@ -35,19 +40,35 @@ export const SourceEndpoint = ({
    <Flex
      ref={ref}
      data-testid="endpoint"
-      boxSize="18px"
+      boxSize="32px"
      rounded="full"
      onMouseDownCapture={handleMouseDown}
      cursor="copy"
-      borderWidth="1px"
-      borderColor="gray.400"
-      bgColor="white"
      justify="center"
      align="center"
      pointerEvents="all"
      {...props}
    >
-      <Box bgColor="gray.400" rounded="full" boxSize="6px" />
+      <Flex
+        boxSize="20px"
+        justify="center"
+        align="center"
+        bgColor="gray.100"
+        rounded="full"
+      >
+        <Flex
+          boxSize="13px"
+          rounded="full"
+          borderWidth="3.5px"
+          shadow={`sm`}
+          borderColor={
+            previewingEdge?.from.stepId === source.stepId &&
+            previewingEdge.from.itemId === source.itemId
+              ? 'blue.300'
+              : 'blue.200'
+          }
+        />
+      </Flex>
    </Flex>
  )
 }
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
@ -115,12 +115,11 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
            ref={setMultipleRefs([ref, blockRef])}
            data-testid="block"
            p="4"
-            rounded="lg"
-            bgColor="blue.50"
-            backgroundImage="linear-gradient(rgb(235, 239, 244), rgb(231, 234, 241))"
+            rounded="xl"
+            bgColor="#ffffff"
            borderWidth="2px"
            borderColor={
-              isConnecting || isOpened || isPreviewing ? 'blue.400' : 'white'
+              isConnecting || isOpened || isPreviewing ? 'blue.400' : '#ffffff'
            }
            w="300px"
            transition="border 300ms, box-shadow 200ms"
@ -134,7 +133,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
            cursor={isMouseDown ? 'grabbing' : 'pointer'}
-            boxShadow="0px 0px 0px 1px #e9edf3;"
+            shadow="md"
            _hover={{ shadow: 'lg' }}
            zIndex={focusedBlockId === block.id ? 10 : 1}
          >
--- a/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNode.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNode.tsx
@ -3,7 +3,13 @@ import { ContextMenu } from 'components/shared/ContextMenu'
 import { Coordinates } from 'contexts/GraphContext'
 import { NodePosition, useDragDistance } from 'contexts/GraphDndContext'
 import { useTypebot } from 'contexts/TypebotContext'
-import { ButtonItem, Item, ItemIndices, ItemType } from 'models'
+import {
+  ButtonItem,
+  ChoiceInputStep,
+  Item,
+  ItemIndices,
+  ItemType,
+} from 'models'
 import React, { useRef, useState } from 'react'
 import { setMultipleRefs } from 'services/utils'
 import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
@ -31,6 +37,11 @@ export const ItemNode = ({
  const { typebot } = useTypebot()
  const [isMouseOver, setIsMouseOver] = useState(false)
  const itemRef = useRef<HTMLDivElement | null>(null)
+  const isConnectable = !(
+    typebot?.blocks[indices.blockIndex].steps[
+      indices.stepIndex
+    ] as ChoiceInputStep
+  )?.options?.isMultipleChoice
  const onDrag = (position: NodePosition) => {
    if (!onMouseDown || item.type !== ItemType.BUTTON) return
    onMouseDown(position, item)
@ -61,8 +72,9 @@ export const ItemNode = ({
          transition="box-shadow 200ms"
          borderWidth="1px"
          rounded="md"
-          borderColor={isOpened ? 'blue.400' : 'gray.300'}
+          borderColor={isOpened ? 'blue.400' : 'gray.100'}
          pointerEvents={isReadOnly ? 'none' : 'all'}
+          bgColor="white"
          w="full"
        >
          <ItemNodeContent
@ -71,7 +83,7 @@ export const ItemNode = ({
            indices={indices}
            isLastItem={isLastItem}
          />
-          {typebot && (
+          {typebot && isConnectable && (
            <SourceEndpoint
              source={{
                blockId: typebot.blocks[indices.blockIndex].id,
@ -79,7 +91,7 @@ export const ItemNode = ({
                itemId: item.id,
              }}
              pos="absolute"
-              right="15px"
+              right="-49px"
              pointerEvents="all"
            />
          )}
--- a/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ButtonNodeContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ButtonNodeContent.tsx
@ -62,7 +62,7 @@ export const ButtonNodeContent = ({
  }

  return (
-    <Flex px={4} py={2} justify="center" w="90%">
+    <Flex px={4} py={2} justify="center" w="90%" pos="relative">
      <Editable
        ref={editableRef}
        flex="1"
@ -82,7 +82,12 @@ export const ButtonNodeContent = ({
      </Editable>
      <Fade
        in={isMouseOver}
-        style={{ position: 'absolute', bottom: '-15px', zIndex: 3 }}
+        style={{
+          position: 'absolute',
+          bottom: '-15px',
+          zIndex: 3,
+          left: '90px',
+        }}
        unmountOnExit
      >
        <IconButton
@ -90,7 +95,7 @@ export const ButtonNodeContent = ({
          icon={<PlusIcon />}
          size="xs"
          shadow="md"
-          colorScheme="blue"
+          colorScheme="gray"
          onClick={handlePlusClick}
        />
      </Fade>
--- a/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodesList.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodesList.tsx
@ -30,6 +30,9 @@ export const ItemNodesList = ({
    (draggedItem && mouseOverBlock?.id === blockId) ?? false
  const showPlaceholders = draggedItem && !isReadOnly

+  const isLastStep =
+    typebot?.blocks[blockIndex].steps[stepIndex + 1] === undefined
+
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
@ -148,7 +151,7 @@ export const ItemNodesList = ({
          />
        </Stack>
      ))}
-      <Stack>
+      {isLastStep && (
        <Flex
          px="4"
          py="2"
@ -167,10 +170,10 @@ export const ItemNodesList = ({
              stepId: step.id,
            }}
            pos="absolute"
-            right="15px"
+            right="-49px"
          />
        </Flex>
-      </Stack>
+      )}

      {draggedItem && draggedItem.stepId === step.id && (
        <Portal>
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
@ -171,12 +171,13 @@ export const StepNode = ({
                userSelect="none"
                p="3"
                borderWidth="1px"
-                borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.300'}
+                borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.200'}
                rounded="lg"
                cursor={'pointer'}
-                bgColor="white"
+                bgColor="gray.50"
                align="flex-start"
                w="full"
+                transition="border-color 0.2s"
              >
                <StepIcon
                  type={step.type}
@ -197,8 +198,8 @@ export const StepNode = ({
                      stepId: step.id,
                    }}
                    pos="absolute"
-                    right="15px"
-                    bottom="18px"
+                    right="-34px"
+                    bottom="10px"
                  />
                )}
              </HStack>
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx
@ -103,7 +103,7 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
      flex="1"
      ref={textEditorRef}
      borderWidth="2px"
-      borderColor="blue.500"
+      borderColor="blue.400"
      rounded="md"
      onMouseDown={handleMouseDown}
      pos="relative"
--- a/apps/builder/layouts/editor/Board.tsx
+++ b/apps/builder/layouts/editor/Board.tsx
@ -14,7 +14,15 @@ export const Board = () => {
  const { rightPanel } = useEditor()

  return (
-    <Flex flex="1" pos="relative" bgColor="gray.50" h="full">
+    <Flex
+      flex="1"
+      pos="relative"
+      h="full"
+      background="#f4f5f8"
+      backgroundImage="radial-gradient(#c6d0e1 1px, transparent 0)"
+      backgroundSize="40px 40px"
+      backgroundPosition="-19px -19px"
+    >
      <GraphDndContext>
        <StepsSideBar />
        <GraphProvider blocks={typebot?.blocks ?? []} isReadOnly={isReadOnly}>
--- a/apps/builder/libs/chakra.ts
+++ b/apps/builder/libs/chakra.ts
@ -5,7 +5,7 @@ const fonts = {
  body: 'Open Sans',
 }

-const colors = {
+export const colors = {
  gray: {
    50: '#F9FAFB',
    100: '#F3F4F6',
--- a/apps/builder/pages/_app.tsx
+++ b/apps/builder/pages/_app.tsx
@ -2,7 +2,7 @@ import React from 'react'
 import { AppProps } from 'next/app'
 import { SessionProvider } from 'next-auth/react'
 import { ChakraProvider } from '@chakra-ui/react'
-import { customTheme } from 'libs/chakra'
+import { customTheme } from 'libs/theme'
 import { useRouterProgressBar } from 'libs/routerProgressBar'
 import 'assets/styles/routerProgressBar.css'
 import 'assets/styles/plate.css'
--- a/apps/builder/services/graph.ts
+++ b/apps/builder/services/graph.ts
@ -9,6 +9,8 @@ import {
 } from 'contexts/GraphContext'
 import { roundCorners } from 'svg-round-corners'

+const roundSize = 20
+
 export const computeDropOffPath = (
  sourcePosition: Coordinates,
  sourceTop: number
@ -18,7 +20,10 @@ export const computeDropOffPath = (
    x: sourceCoord.x + 20,
    y: sourceCoord.y + 80,
  })
-  return roundCorners(`M${sourceCoord.x},${sourceCoord.y} ${segments}`, 10).path
+  return roundCorners(
+    `M${sourceCoord.x},${sourceCoord.y} ${segments}`,
+    roundSize
+  ).path
 }

 export const computeSourceCoordinates = (
@ -222,7 +227,7 @@ export const computeEdgePath = ({
  })
  return roundCorners(
    `M${sourcePosition.x},${sourcePosition.y} ${segments}`,
-    10
+    roundSize
  ).path
 }

@ -268,7 +273,7 @@ export const computeEdgePathToMouse = ({
  )
  return roundCorners(
    `M${sourcePosition.x},${sourcePosition.y} ${segments}`,
-    10
+    roundSize
  ).path
 }

@ -280,7 +285,7 @@ export const getEndpointTopOffset = (
  if (!endpointId) return
  const endpointRef = endpoints[endpointId]?.ref
  if (!endpointRef?.current) return
-  const endpointHeight = 18
+  const endpointHeight = 28
  return (
    endpointRef.current.getBoundingClientRect().top +
    endpointHeight / 2 -