🚀 Init preview and typebot cotext in editor

baptisteArno · Dec 22, 2021 · b7cdc0d · b7cdc0d
1 parent a54e42f
commit b7cdc0d
Show file tree

Hide file tree

Showing 87 changed files with 4,431 additions and 735 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,4 @@ workspace.code-workspace
 .DS_Store
 
 .turbo
+apps/builder/tsconfig.tsbuildinfo
diff --git a/apps/builder/assets/icons.tsx b/apps/builder/assets/icons.tsx
@@ -7,6 +7,9 @@ const featherIconsBaseProps: IconProps = {
   strokeLinecap: 'round',
   strokeLinejoin: 'round',
 }
+
+// 99% of these icons are from Feather icons (https://feathericons.com/)
+
 export const SettingsIcon = (props: IconProps) => (
   <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
     <circle cx="12" cy="12" r="3"></circle>
@@ -102,3 +105,59 @@ export const FlagIcon = (props: IconProps) => (
     <line x1="4" y1="22" x2="4" y2="15"></line>
   </Icon>
 )
+
+export const BoldIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+    <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+  </Icon>
+)
+
+export const ItalicIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <line x1="19" y1="4" x2="10" y2="4"></line>
+    <line x1="14" y1="20" x2="5" y2="20"></line>
+    <line x1="15" y1="4" x2="9" y2="20"></line>
+  </Icon>
+)
+
+export const UnderlineIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path>
+    <line x1="4" y1="21" x2="20" y2="21"></line>
+  </Icon>
+)
+
+export const LinkIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+  </Icon>
+)
+
+export const SaveIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
+    <polyline points="17 21 17 13 7 13 7 21"></polyline>
+    <polyline points="7 3 7 8 15 8"></polyline>
+  </Icon>
+)
+
+export const CheckIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </Icon>
+)
+
+export const ChatIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+  </Icon>
+)
+
+export const TrashIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <polyline points="3 6 5 6 21 6"></polyline>
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+  </Icon>
+)
diff --git a/apps/builder/assets/styles/plate.css b/apps/builder/assets/styles/plate.css
@@ -0,0 +1,31 @@
+.slate-bold {
+  font-weight: bold;
+}
+
+.slate-italic {
+  font-style: oblique;
+}
+
+.slate-underline {
+  text-decoration: underline;
+}
+
+.slate-ToolbarButton-active {
+  color: blue !important;
+}
+.slate-ToolbarButton-active > svg {
+  stroke-width: 2px;
+}
+
+.slate-ToolbarButton {
+  color: gray;
+}
+
+.slate-a {
+  color: blue !important;
+  text-decoration: underline;
+}
+
+.slate-html-container > div {
+  min-height: 24px;
+}
diff --git a/apps/builder/components/auth/SocialLoginButtons.tsx b/apps/builder/components/auth/SocialLoginButtons.tsx
@@ -16,7 +16,6 @@ export const SocialLoginButtons = () => {
     <Stack>
       <Button
         leftIcon={<GithubLogo />}
-        colorScheme="gray"
         onClick={handleGitHubClick}
         data-testid="github"
         isLoading={['loading', 'authenticated'].includes(status)}
@@ -25,7 +24,6 @@ export const SocialLoginButtons = () => {
       </Button>
       <Button
         leftIcon={<GoogleLogo />}
-        colorScheme="gray"
         onClick={handleGoogleClick}
         data-testid="google"
         isLoading={['loading', 'authenticated'].includes(status)}
@@ -34,7 +32,6 @@ export const SocialLoginButtons = () => {
       </Button>
       <Button
         leftIcon={<FacebookLogo />}
-        colorScheme="gray"
         onClick={handleFacebookClick}
         data-testid="facebook"
         isLoading={['loading', 'authenticated'].includes(status)}

diff --git a/apps/builder/components/board/Board.tsx b/apps/builder/components/board/Board.tsx
@@ -2,13 +2,26 @@ import { Flex } from '@chakra-ui/react'
 import React from 'react'
 import Graph from './graph/Graph'
 import { DndContext } from 'contexts/DndContext'
-import StepTypesList from './StepTypesList'
+import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
+import { StepTypesList } from './StepTypesList'
+import { PreviewDrawer } from './preview/PreviewDrawer'
+import { RightPanel, useEditor } from 'contexts/EditorContext'
 
-export const Board = () => (
-  <Flex flex="1" pos="relative" bgColor="gray.50">
-    <DndContext>
-      <StepTypesList />
-      <Graph />
-    </DndContext>
-  </Flex>
-)
+export const Board = () => {
+  const { rightPanel } = useEditor()
+  return (
+    <Flex
+      flex="1"
+      pos="relative"
+      bgColor="gray.50"
+      h={`calc(100vh - ${headerHeight}px)`}
+      marginTop={`${headerHeight}px`}
+    >
+      <DndContext>
+        <StepTypesList />
+        <Graph />
+        {rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
+      </DndContext>
+    </Flex>
+  )
+}
diff --git a/apps/builder/components/board/StepTypesList/StepCard.tsx b/apps/builder/components/board/StepTypesList/StepCard.tsx
@@ -29,7 +29,6 @@ export const StepCard = ({
         rounded="lg"
         flex="1"
         cursor={'grab'}
-        colorScheme="gray"
         opacity={isMouseDown ? '0.4' : '1'}
         onMouseDown={handleMouseDown}
       >
@@ -54,7 +53,6 @@ export const StepCardOverlay = ({
       borderWidth="1px"
       rounded="lg"
       cursor={'grab'}
-      colorScheme="gray"
       w="147px"
       pos="fixed"
       top="0"

diff --git a/apps/builder/components/board/StepTypesList/StepIcon.tsx b/apps/builder/components/board/StepTypesList/StepIcon.tsx
@@ -1,4 +1,4 @@
-import { CalendarIcon, FlagIcon, ImageIcon, TextIcon } from 'assets/icons'
+import { ChatIcon, FlagIcon, TextIcon } from 'assets/icons'
 import { StepType } from 'bot-engine'
 import React from 'react'
 
@@ -7,13 +7,10 @@ type StepIconProps = { type: StepType }
 export const StepIcon = ({ type }: StepIconProps) => {
   switch (type) {
     case StepType.TEXT: {
-      return <TextIcon />
-    }
-    case StepType.IMAGE: {
-      return <ImageIcon />
+      return <ChatIcon />
     }
-    case StepType.DATE_PICKER: {
-      return <CalendarIcon />
+    case StepType.TEXT: {
+      return <TextIcon />
     }
     case StepType.START: {
       return <FlagIcon />

diff --git a/apps/builder/components/board/StepTypesList/StepLabel.tsx b/apps/builder/components/board/StepTypesList/StepLabel.tsx
@@ -9,11 +9,8 @@ export const StepLabel = ({ type }: Props) => {
     case StepType.TEXT: {
       return <Text>Text</Text>
     }
-    case StepType.IMAGE: {
-      return <Text>Image</Text>
-    }
-    case StepType.DATE_PICKER: {
-      return <Text>Date</Text>
+    case StepType.TEXT_INPUT: {
+      return <Text>Text</Text>
     }
     default: {
       return <></>

diff --git a/apps/builder/components/board/StepTypesList/StepTypesList.tsx b/apps/builder/components/board/StepTypesList/StepTypesList.tsx
@@ -14,8 +14,8 @@ export const stepListItems: {
   bubbles: { type: StepType }[]
   inputs: { type: StepType }[]
 } = {
-  bubbles: [{ type: StepType.TEXT }, { type: StepType.IMAGE }],
-  inputs: [{ type: StepType.DATE_PICKER }],
+  bubbles: [{ type: StepType.TEXT }],
+  inputs: [{ type: StepType.TEXT_INPUT }],
 }
 
 export const StepTypesList = () => {

diff --git a/apps/builder/components/board/StepTypesList/index.tsx b/apps/builder/components/board/StepTypesList/index.tsx
@@ -1 +1 @@
-export { StepTypesList as default } from './StepTypesList'
+export { StepTypesList } from './StepTypesList'
diff --git a/apps/builder/components/board/graph/BlockNode/BlockNode.tsx b/apps/builder/components/board/graph/BlockNode/BlockNode.tsx
@@ -5,27 +5,31 @@ import {
   Stack,
   useEventListener,
 } from '@chakra-ui/react'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, 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'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ContextMenu } from 'components/shared/ContextMenu'
+import { BlockNodeContextMenu } from './BlockNodeContextMenu'
 
 export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
-  const {
-    updateBlockPosition,
-    addNewStepToBlock,
-    connectingIds,
-    setConnectingIds,
-  } = useGraph()
+  const { connectingIds, setConnectingIds, previewingIds } = useGraph()
+  const { updateBlockPosition, addStepToBlock } = useTypebot()
   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)
+  const isPreviewing = useMemo(
+    () =>
+      previewingIds.sourceId === block.id ||
+      previewingIds.targetId === block.id,
+    [block.id, previewingIds.sourceId, previewingIds.targetId]
+  )
 
   useEffect(() => {
     setIsConnecting(
@@ -69,44 +73,56 @@ export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
   const handleStepDrop = (index: number) => {
     setShowSortPlaceholders(false)
     if (draggedStepType) {
-      addNewStepToBlock(block.id, draggedStepType, index)
+      addStepToBlock(block.id, draggedStepType, index)
       setDraggedStepType(undefined)
     }
     if (draggedStep) {
-      addNewStepToBlock(block.id, draggedStep, index)
+      addStepToBlock(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}
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => <BlockNodeContextMenu blockId={block.id} />}
     >
-      <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>
+      {(ref, isOpened) => (
+        <Stack
+          ref={ref}
+          p="4"
+          rounded="lg"
+          bgColor="blue.50"
+          borderWidth="2px"
+          borderColor={
+            isConnecting || isOpened || isPreviewing ? '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}
+        >
+          <Editable value={titleValue} onChange={handleTitleChange}>
+            <EditablePreview
+              _hover={{ bgColor: 'blue.100' }}
+              px="1"
+              userSelect={'none'}
+            />
+            <EditableInput minW="0" px="1" />
+          </Editable>
+          <StepsList
+            blockId={block.id}
+            steps={block.steps}
+            showSortPlaceholders={showSortPlaceholders}
+            onMouseUp={handleStepDrop}
+          />
+        </Stack>
+      )}
+    </ContextMenu>
   )
 }
diff --git a/apps/builder/components/board/graph/BlockNode/BlockNodeContextMenu.tsx b/apps/builder/components/board/graph/BlockNode/BlockNodeContextMenu.tsx
@@ -0,0 +1,18 @@
+import { MenuList, MenuItem } from '@chakra-ui/react'
+import { TrashIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext'
+
+export const BlockNodeContextMenu = ({ blockId }: { blockId: string }) => {
+  const { removeBlock } = useTypebot()
+
+  const handleDeleteClick = () => {
+    removeBlock(blockId)
+  }
+  return (
+    <MenuList>
+      <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
+        Delete
+      </MenuItem>
+    </MenuList>
+  )
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -34,3 +34,4 @@ workspace.code-workspace
		.DS_Store

		.turbo
		apps/builder/tsconfig.tsbuildinfo
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { StepTypesList as default } from './StepTypesList'
		export { StepTypesList } from './StepTypesList'